<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小镇</title>

    <link rel="stylesheet" href="css/北大青鸟课程导航.css">


    <style>

      .box{width: 508px; margin: 30px auto}

         h2{font-size: 12px}
        .top ul li{display: block;}
        .top ul img{float: left}

           .smallbox{
            ;width:526px}

            .smallbox .text{width: 150px}

            .box .smallbox ul li{float: left}

            .box .smallbox .text p:nth-of-type(1){color: cornflowerblue;font-weight: bold;font-size: 14px}



             .smallbox ul li{margin-top: 28px}

             .box{border: 1px solid #cccccc}
             .smallbox{margin: 10px 20px}

              img{border: 2px solid #cccccc;border-radius: 10px;padding: 2px;float: left}
             .text{margin-left: 5px;font-size: 12px;margin: 5px 5px}

            .smallbox:after{
          content: '';          /*在clear类后面添加内容为空*/
          display: block;      /*把添加的内容转化为块元素*/
          clear: both; }        /*清除这个元素两边的浮动*/


    </style>
</head>
<body>

<div class="box">

      <div class="smallbox">
          <h2> 摄影社区热门小镇</h2>



     <ul>

       <li>
           <img src="img/pic_01.jpg">

           <div class="text">
           <p>风景狙击手</p>
           <p>成员：80</p>
           <p>作品：276 </p>
             </div>
       </li>

     <li>
         <img src="img/pic_02.jpg">
         <div class="text">
             <p>风景狙击手</p>
             <p>成员：80</p>
             <p>作品：276 </p>
         </div>

     </li>

         <li>
             <img src="img/pic_03.jpg">
             <div class="text">
                 <p>风景狙击手</p>
                 <p>成员：80</p>
                 <p>作品：276 </p>
             </div>

         </li>

                                   </ul>


          <ul>

        <li>
            <img src="img/pic_04.jpg">
            <div class="text">
                <p>风景狙击手</p>
                <p>成员：80</p>
                <p>作品：276 </p>
            </div>
        </li>
        <li>
            <img src="img/pic_05.jpg">
            <div class="text">
                <p>风景狙击手</p>
                <p>成员：80</p>
                <p>作品：276 </p>
            </div>

        </li>

        <li>
            <img src="img/pic_06.jpg">

            <div class="text">
                <p>风景狙击手</p>
                <p>成员：80</p>
                <p>作品：276 </p>
            </div>

        </li>

    </ul>


      </div>
</div>



</body>
</html>